import React, { Component } from 'react';
import { Button, message } from 'antd';
import {
  WeaDialog,
  WeaSearchGroup,
  WeaFormItem,
  WeaBrowser,
  WeaLocaleProvider,
  WeaError,
} from 'ecCom';
import Api from '../../../apis/cowork';

const getLabel = WeaLocaleProvider.getLabel;

class InvitedDialog extends Component {
  renderItems = () => [
    {
      com: (
        <WeaFormItem
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaFormItem@0ajula@invited`}
          label={getLabel(518226, '受邀人员')}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaError
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaError@b4o1qs@invited`}
            tipPosition="bottom"
            ref="invitedError"
            error={getLabel(518230, '受邀人员为空')}
            style={{ width: '100%' }}
          >
            <WeaBrowser
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaBrowser@42xaxd@invited`}
              type={17}
              key="invited"
              textDecoration={true}
              viewAttr={3}
              onChange={this.onInvitedChange}
              isSingle={false}
            />
          </WeaError>
        </WeaFormItem>
      ),
    },
  ];

  render() {
    const { visible } = this.props;
    const buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@x0td5m@onok`}
        type="primary"
        onClick={this.submit}
      >
        {getLabel(83446, '确定')}
      </Button>,
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@iu06lt@cancel`}
        type="ghost"
        onClick={this.onCancel}
      >
        {getLabel(201, '取消')}
      </Button>,
    ];
    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@5ecrs5`}
        visible={visible}
        onCancel={this.onCancel}
        title={getLabel(518225, '邀请加入协作')}
        icon="icon-coms-cowork"
        iconBgcolor="#A0B0BA"
        style={{ height: 100 }}
        buttons={buttons}
        hasScroll
      >
        <WeaSearchGroup
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaSearchGroup@2engcj`}
          showGroup={true}
          items={this.renderItems()}
          col={1}
        />
      </WeaDialog>
    );
  }

  onInvitedChange = (ids, names) => {
    this.invitedIds = ids;
    this.invitedNames = names;
  };

  submit = async () => {
    const { submitParams, submit } = this.props;
    if (!this.invitedIds) {
      this.refs.invitedError.showError();
      return;
    }
    let params = {
      shareType: 1,
      shareValue: this.invitedIds,
      shareValuespan: this.invitedNames,
      ...submitParams,
    };
    let res = await Api.saveorupdateCoworkShare(params);
    if (res.flag) {
      message.success(getLabel('516506', '邀请成功'));
      typeof submit === 'function' && submit(res);
    } else {
      message.error(`${getLabel(4715, '操作失败')}`);
    }
    this.onCancel();
  };

  onCancel = () => {
    const { onCancel } = this.props;
    typeof onCancel === 'function' && onCancel();
    this.invitedIds = null;
    this.invitedNames = null;
  };
}

export default InvitedDialog;
